import React, { Component } from 'react'
import { connect } from 'dva';
import Link from 'umi/link';
import { Button, message, Card } from 'antd';

interface Props {
  dispatch?: Function,
  details: {
    id: number,
    companyId: number
  },
  match: {
    params: {
      id: number
    }
  }
}

@connect(({ report_template }) => ({
  details: report_template.details
}))
class ProblemDetail extends Component<Props, any> {
  state = {
    hasMsg: null,
    templateData: {
      name: '',
      groupList: null
    }
  };
  componentWillMount() {
    this.state.hasMsg = message.loading('');
    const { dispatch, match } = this.props;
    const { params } = match;
    dispatch({
      type: 'report_template/queryInfoById',
      payload: params.id
    }).then(() => {
      const { details } = this.props;
      this.setState({
        templateData: details,
      }, this.state.hasMsg)
    })
  }
  optionFn(data) {
    if(!data) {
      return null;
    }else if(!Array.isArray(data.itemList)){
      return null;
    }else {
      return (
        data.itemList.map((item, index) => (
          <p>{index + 1}、{item.context}</p>
        ))
      )
    }
  }

  render() {
    return (
      <>
        <div style={{'marginBottom': '30px'}}>
          <div className="header">
            <h4 style={{'margin': '0px auto 30px', 'textAlign': 'center', 'fontSize': '18px', 'width': '90%'}}>
              {this.state.templateData ? this.state.templateData.name : ''}
            </h4>
          </div>
          {
            this.state.templateData ? this.state.templateData.groupList ? this.state.templateData.groupList.map((item, index) => (
              <Card
                title={item.name}
                style={{ width: '90%', 'margin': '0 auto' }}
                key={index}
              >
                {
                  item.reportTemplateQuestionList ? item.reportTemplateQuestionList.map((q_item, q_index) => (
                    <div key={q_index}>
                      <h5 style={{
                        'marginBottom': '10px',
                        'borderBottom': '1px solid #aaa',
                        'fontSize': '16px',
                        'paddingLeft': '24px',
                        'paddingBottom': '6px'
                      }}>{q_item.name ? `${q_item.name}(${q_item.typeName})` : ''}</h5>
                      <div style={{'paddingLeft': '48px', 'fontSize': '15px'}}>
                        {
                          this.optionFn(q_item)
                        }
                      </div>
                    </div>
                  )) : (
                    <div>
                      <h5 style={{
                        'marginBottom': '10px',
                        'borderBottom': '1px solid #aaa',
                        'fontSize': '16px',
                        'paddingLeft': '24px',
                        'paddingBottom': '6px'
                      }}>{item.name}</h5>
                    </div>
                  )
                }
              </Card>
            )) : null : null
          }
        </div>
        <Button><Link to={`/data/report_template`}>返回</Link></Button>
      </>
    );
  }
}

export default ProblemDetail;


